<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:include page="common/header.jsp">
    <jsp:param name="title" value="结算"/>
    <jsp:param name="customCss" value="checkout"/>
</jsp:include>

<div class="container">
    <h1 class="page-title">确认订单</h1>

    <div class="checkout-content">
        <!-- 收货地址 -->
        <div class="address-section">
            <h3>收货地址</h3>
            <div class="address-form">
                <div class="form-group">
                    <label for="receiver">收货人：</label>
                    <input type="text" id="receiver" name="receiver" required>
                </div>
                <div class="form-group">
                    <label for="phone">手机号码：</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="address">详细地址：</label>
                    <textarea id="address" name="address" required></textarea>
                </div>
            </div>
        </div>

        <!-- 商品清单 -->
        <div class="order-items">
            <h3>商品清单</h3>
            <div class="items-list">
                <c:forEach items="${cartItems}" var="item">
                    <div class="order-item">
                        <div class="item-image">
                            <c:choose>
                                <c:when test="${not empty item.imageUrl}">
                                    <img src="${item.imageUrl}" alt="${item.name}">
                                </c:when>
                                <c:otherwise>
                                    <img src="${pageContext.request.contextPath}/image/noproduct.png"
                                         alt="${item.name}">
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="item-info">
                            <h4>${item.name}</h4>
                            <div class="item-price">¥${item.price}</div>
                            <div class="item-quantity">数量：${item.quantity}</div>
                            <div class="item-subtotal">小计：¥${item.price * item.quantity}</div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>

        <!-- 订单总结 -->
        <div class="order-summary">
            <div class="summary-item">
                <span>商品总额：</span>
                <span class="price">¥${total}</span>
            </div>
            <div class="summary-item">
                <span>运费：</span>
                <span class="price">¥0.00</span>
            </div>
            <div class="summary-item total">
                <span>应付总额：</span>
                <span class="price">¥${total}</span>
            </div>
        </div>

        <!-- 提交订单 -->
        <div class="submit-section">
            <form id="checkoutForm">
                <input type="hidden" id="totalAmount" value="${total}">
                <button type="submit" class="submit-btn">提交订单</button>
            </form>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp">
    <jsp:param name="customJs" value="checkout"/>
</jsp:include>
